<template>
	<view class="container">
		<view class="bg-white padding-sm">
			<view class="round flex justify-between align-center bg-color tabs text-df text-white">
				<view @click="checkChange(1)" :class="{ on: checkStatus == 1 }" class="tab round text-center">
					我的发券
				</view>
				<view @click="checkChange(2)" :class="{ on: checkStatus == 2 }" class="tab round text-center">
					已领取
				</view>
				<view @click="checkChange(3)" :class="{ on: checkStatus == 3 }" class="tab round text-center">
					已使用
				</view>
			</view>
			<view v-if="checkStatus != 1" class="margin-top flex justify-start align-center">
				<view class="flex justify-start align-center bg-F4F4F4 padding-left round f-grow1"
					style="height: 70rpx; width: 460rpx">
					<image :src="baseUrl + '/static/search_for.png'" mode="" style="width: 25rpx; height: 25rpx">
					</image>
					<input type="text" v-model="userName" value="" class="text-13 f-grow1 padding-left-sm"
						placeholder="搜索优惠券名称" />
				</view>
				<view class="text-df color margin-left" @click="handSearch">
					筛选
				</view>
			</view>
		</view>
		<view v-if="checkStatus == 1" class="flex justify-between align-center text-df text-666 c-nav bg-white">
			<view :class="{ on: status == '' }" @click="handUpStatus(0)"
				class="padding-top-sm padding-bottom-sm margin-left margin-right">
				全部
			</view>
			<view :class="{ on: status == 1 }" @click="handUpStatus(1)"
				class="padding-top-sm padding-bottom-sm margin-left margin-right">
				待发布
			</view>
			<view :class="{ on: status == 2 }" @click="handUpStatus(2)"
				class="padding-top-sm padding-bottom-sm margin-left margin-right">
				已发布
			</view>
			<view :class="{ on: status == 3}" @click="handUpStatus(3)"
				class="padding-top-sm padding-bottom-sm margin-left margin-right">
				领取中
			</view>
			<view :class="{ on: status == 4 }" @click="handUpStatus(4)"
				class="padding-top-sm padding-bottom-sm margin-left margin-right">
				已结束
			</view>
		</view>
		<block v-if='checkStatus==1'>
			<view class="content">
				<view v-for="(item, index) in list" :key="index" class="margin-sm bg-white radius10 padding-bottom">
				
					<view class="padding-left padding-top padding-right flex justify-start align-center">
						<view class="color">
							<view class="">
								<block v-if='item.type!=1'>
									<text class="text-15">¥</text>
									<text class="text-30 text-bold" >{{ parseFloat(item.amount/ 100).toFixed(2)}}</text>
								</block>
								
								<text class="text-30 text-bold" v-else>{{item.amount/10 +'折'}}</text>
							</view>
							<block>
								<view class="text-sm" v-if="item.type == 1"> 折扣券 </view>
								<view class="text-sm" v-if="item.type == 2"> 消费券 </view>
								<view class="text-sm" v-if="item.type == 3"> 发单券 </view>
								<view class="text-sm" v-if="item.type == 4"> 满减券 </view>
							</block>
				
				
						</view>
						<view class="margin-left f-grow1">
							<view class="text-sm text-bold text-181818 text-cut">
								<text v-if="item.couponScopeName">【{{ item.couponScopeName }}】</text> {{ item.name }}
							</view>
							<view class="text-13 text-666 text-bold margin-top-xs text-cut">
								截止领券 {{ item.endTime }}
							</view>
							<view  style="margin-top: 10rpx;color:#ED7200;font-weight: 550;" v-if='item.status==1'>
								待发布
							</view>
							<view style="margin-top: 10rpx;color:#ED7200;font-weight: 550"v-if='item.status==2'>
								已发布
							</view>
							<view style="margin-top: 10rpx;color:#ED7200;font-weight: 550" v-if='item.status==3'>
								领取中
							</view>
							<view style="margin-top: 10rpx;color:#ED7200;font-weight: 550" v-if='item.status==4'>
								已结束
							</view>
						</view>
					</view>
					<view class="flex  margin-top" style="justify-content: space-evenly">
						<!-- <button class="text-sm text-white round btn text-999 margin-right bg-white">结束</button> -->
						<block v-if="item.status == 1">
							<button class="text-sm text-white round btn text-999  bg-white">
								待发布
							</button>
							<button @click="
				      toPage(
				        '/filePage/pages/coupon-edit/coupon-edit?item=' +
				          JSON.stringify(item)
				      )
				    " class="text-sm text-white round btn text-999  bg-white">
								编辑
							</button>
							<button @click="handClick(item)" class="text-sm text-white round btn text-999  bg-white">
								发布
							</button>
							<button class="text-sm text-white round btn text-F94000  bg-white" @click="handDelete(item.id)">
								删除
							</button>
						</block>
						<block v-if="item.status == 2">
							<button class="text-sm text-white round btn text-999 bg-white">
								已发布
							</button>
							<button class="text-sm text-white round btn text-F94000 margin-right bg-white"
								@click="handDelete(item.id)">
								删除
							</button>
						</block>
						<block v-if="item.status == 4">
							<button class="text-sm text-white round btn text-F94000  bg-white">
								已结束
							</button>
							<button class="text-sm text-white round btn text-F94000  bg-white" @click="handDelete(item.id)">
								删除
							</button>
						</block>
					</view>
				</view>
			</view>
			
		</block>
		<block v-else>
			<view v-for="(item, index) in list" :key="index" class="margin-sm bg-white radius10 padding-bottom">
				<view class="flex justify-start align-center padding-sm bg-FAFAFA radius-t-l radius-t-r">
					<image :src="item.userIcon" mode="" class="round cu-avatar"></image>
					<view class="text-15 text-181818 margin-left-xs">
						{{ item.userNickName }}
					</view>
				</view>
				<view class="padding-left padding-top padding-right flex justify-start align-center">
					<view class="color">
						<view class="" v-if='item.couponType != 1'>
							<text class="text-15">¥</text>
							<text class="text-30 text-bold"> {{parseFloat(item.couponAmount/ 100).toFixed(2)}}</text>
						</view>
						<view v-else>{{item.couponAmount +'折'}}</view>
						<block>
							<block v-if="item.couponType == 1">折扣券</block>
							<block v-if="item.couponType == 2">消费券</block>
							<block v-if="item.couponType== 3">发单券</block>
							<block v-if="item.couponType== 4">满减券</block>
						</block>


					</view>
					<view class="margin-left margin-right" style="width: 480rpx">
						<view class="text-sm text-bold text-181818 text-cut" v-if="item.scopeType == 1">
							【全品类】 {{ item.couponName }}
						</view>
						<view class="text-sm text-bold text-181818 text-cut" v-if="item.scopeType == 2">
							【部分类目】 {{ item.couponName }}
						</view>
						<view class="text-sm text-bold text-181818 text-cut" v-if="item.scopeType == 3">
							【指定商品】 {{ item.couponName }}
						</view>
						<view class="text-13 text-666 text-bold margin-top-xs text-cut">
							截止领券 {{ item.couponExpireTime }}
						</view>
					</view>
				</view>

			</view>
		</block>


		<view v-if="checkStatus == 1" class="couponAdd" @click="
        toPage(
          '/filePage/pages/coupon-add/coupon-add?shopType=' +
            shopType +
            '&shopId=' +
            shopId
        )
      ">
			<view>新增优惠券</view>
		</view>
		<uni-load-more :status="loading" />
	</view>
</template>

<script>
	import BetterPull from "@/common/util/BetterPull";
	export default {
		mixins: [
			BetterPull({
				async getPage(page, done) {
					this.loading = "loading";
					let param = {};
					let api = null;

					if (this.checkStatus == 1) {
						param = {
							shopType: this.shopType,
							status: this.status,
							pageNum: page,
							pageSize: 10,
						};
						api = "couponList";
					} else {
						param = {
							status: this.receiveStatus,
							pageNum: page,
							pageSize: 10,
							// shopId: this.shopId,
							shopId: 56,
						};
						if (this.userName) {
							param["userName"] = this.userName;
						}
						api = "comReceivelist";
					}
					const [err, res] = await this.$get(this.$api[api], param);
					if (res) {
						var data = res.data.list;
						done(data);
						if (data.length < 10) {
							this.loading = "noMore";
						} else {
							this.loading = "more";
						}
					}
					if (err) {
						done([]);
						this.loading = "noMore";
					}
				},
			}),
		],

		data() {
			return {
				baseUrl: this.$config.baseUrl,
				shopType: 1,
				status: "",
				checkStatus: 1,
				loading: "more",
				receiveStatus: "",
				userName: "",
				shopId: "",
			};
		},
		onLoad(options) {
			this.shopType = options.type;
			if (options.type == 1) {
				this.shopId = uni.getStorageSync("shopIdApply");
			}
			if (options.type == 2) {
				this.shopId = uni.getStorageSync("shopServiceIdApply");
			}
		},
		methods: {
			toPage(url) {
				this.$util.openNewPage(url);
			},
			async getList() {},
			checkChange(status) {
				this.checkStatus = status;
				if (status == 1) {
					this.Refresh();
				} else if (status == 2) {
					this.receiveStatus = "";
					this.Refresh();
				} else {
					this.receiveStatus = 2;
					this.Refresh();
				}
				console.log(this.list);
			},
			handUpStatus(index) {
				if (index == 0) {
					this.status = "";
				} else {
					this.status = index;
				}
				this.Refresh();
			},
			handClick(item) {
				uni.showModal({
					title: "提示",
					content: "你确定要发布该优惠券吗",
					success: (res) => {
						if (res.confirm) {
							const data = {
								id: item.id,
								status: 2,
							};
							this.$get(this.$api.updateStatus, data).then((res) => {
								const [err, rs] = res;
								if (rs) {
									this.$util.msg("发布成功");
									this.Refresh();
								}
							});
						}
					},
				});
			},
			async handDelete(id) {
				const data = {
					id,
				};
				const [err, rs] = await this.$get(this.$api.CouponDelete, data);
				if (rs) {
					this.$util.msg("删除成功");
					this.Refresh();
				}
			},
			handSearch() {
				this.Refresh();
			},
		},
	};
</script>

<style lang="scss" scoped>
	.tabs {
		padding: 4rpx;

		.tab {
			width: 234rpx;
			padding: 16rpx;
		}

		.on {
			background: #fff;
			color: #ed7200;
			font-weight: bold;
		}
	}

	.btn {
		min-width: 148rpx;
		width: 148rpx;
		height: 64rpx;
		line-height: 64rpx;
		text-align: center;
		border: 1rpx solid;
		// background: linear-gradient(to right,#FF416C,#FF4B2B);
	}

	.c-nav {
		view {
			border-bottom: 6rpx solid #fff;
		}

		.on {
			color: #221815;
			font-weight: bold;
			border-bottom: 6rpx solid #ed7200;
		}
	}

	.couponAdd {
		position: fixed;
		bottom: 98rpx;
		width: 100%;
		height: 88rpx;
		padding: 0 20rpx;

		view {
			width: 100%;
			height: 100%;
			background: linear-gradient(90deg, #ff416c, #ff4b2b);
			box-shadow: 0px 4rpx 10rpx 0px rgba(255, 65, 107, 0.24);
			border-radius: 44rpx;
			text-align: center;
			line-height: 88rpx;
			color: #fff;
			font-weight: bold;
		}
	}
	.content{
		margin-bottom: 140rpx;
	}
</style>
